<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS3 buttons by Chad Mazzola</title>
  <meta name="description" content="A collection of CSS3 buttons by Chad Mazzola">
  <link rel="stylesheet" href="stylesheets/buttons.css" type="text/css" media="screen">
</head>

<body>

  <div class="container">
    <h1>CSS3 buttons</h1>

    <div class="project-info">
      <div class="description">
        <p>This is a collection of CSS3 buttons that use the simplest possible markup. They look best in WebKit-based browsers, almost as good in Firefox, with all other browsers falling back to a less-styled button.</p>
        <p>These buttons are now implemented using Sass, with help from <a href="http://github.com/thoughtbot/bourbon">Bourbon</a>. The generated CSS for all the buttons is also available.</p>
      </div>

      <div class="info">
        <ul>
          <li><a href="https://chad.is">Maintained by Chad Mazzola</a>.</li>
          <li><a href="http://twitter.com/ubuwaits">Follow me on Twitter</a></li>
          <li><a href="http://github.com/ubuwaits/css3-buttons">Watch this repo on GitHub</a></li>
        </ul>
      </div>
    </div>

    <div class="button-collection">
      <div class="button-info">
        <h2>Classic buttons</h2>
        <p>This is the original set of buttons, showing a variety of CSS3 styles in different combinations. Study the code, then adjust to fit the context of where it's used.</p>
      </div>

      <ul class="column">
        <li>
          <button class="minimal">Minimal</button>
        </li>
        <li>
          <button class="clean-gray">Clean Gray</button>
        </li>
        <li>
          <button class="cupid-green">Cupid Green</button>
        </li>
        <li>
          <button class="cupid-blue">Cupid Blue</button>
        </li>
        <li>
          <button class="blue-pill">Blue Pill</button>
        </li>
        <li>
          <button class="thoughtbot">thoughtbot</button>
        </li>
        <li>
          <button class="punch">Punch</button>
        </li>
        <li>
          <button class="purple-candy">Purple Candy</button>
        </li>
        <li>
          <button class="shiny-blue">Shiny Blue</button>
        </li>
        <li>
          <button class="download-itunes">Download iTunes</button>
        </li>
        <li>
          <button class="skip">Skip</button>
        </li>
        <li>
          <div class="indent"><button class="minimal-indent">Minimal Indent</button></div>
        </li>
      </ul>
    </div>

    <div class="button-collection">
      <div class="button-info">
        <h2>WebKit experimental</h2>
        <p>Proof of concept buttons using WebKit-only features.</p>
      </div>

      <ul class="column">
        <li>
          <button class="webkit-badge">Quit!</button>
        </li>
        <li>
          <button class="webkit-seal">Approve!</button>
        </li>
        <li>
          <button class="webkit-check">Accept</button>
        </li>
      </ul>
    </div>

    <p class="credit">Maintained by Chad Mazzola. <a href="http://twitter.com/ubuwaits">Follow me on Twitter</a> or <a href="http://github.com/ubuwaits/css3-buttons">watch this repo on GitHub</a>.</p>
  </div>

</body>
</html>
